<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="域">
          <el-select
              filterable
              clearable
              v-model="queryForm.domain"
              placeholder="请选择域">
            <el-option
                v-for="item in domainOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册应用名称">
          <el-input v-model="queryForm.appName" placeholder="不区分大小模糊查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          :data="pageResult.data"
          border
          style="width: 100%; margin-top: 20px;font-size: 10px">
        <el-table-column
            align="center"
            prop="appName"
            label="系统名称">
        </el-table-column>
        <el-table-column
            align="center"
            label="域名字">
          <template slot-scope="scope">
            {{ getDomainName(scope.row.domain) }}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="domain"
            label="域Code">
        </el-table-column>
        <el-table-column
            align="center"
            prop="clientAddress"
            label="客户端地址">
        </el-table-column>
        <el-table-column
            align="center"
            prop="clientPort"
            label="客户端端口">
        </el-table-column>
        <el-table-column
            sortable
            align="center"
            width="300"
            label="注册/最近心跳时间">
          <template slot-scope="scope">
            {{ recDateFormat(scope.row.registerTime) }} / {{ recDateFormat(scope.row.lastUpdateTime) }}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="服务状态">
          <template slot-scope="scope">
            <span style="color: red" v-if="scope.row.isDelete === 1"><strong>离线</strong></span>
            <span style="color: #05a308" v-if="scope.row.isDelete === 0"><strong>在线</strong></span>
          </template>
        </el-table-column>
      </el-table>

      <el-footer>
        <vue-page :paginator="pageResult.paginator" :query="query"></vue-page>
      </el-footer>
    </el-card>
  </div>
</template>
<script>

import vuePage from "../common/vue-page.vue"
import {loadDomainSelector} from "../../api/loadSelectorApi";
import {registerPageQuery} from "../../api/registerApi";

export default {
  name: "register",
  filters: {},
  components: {
    vuePage,
  },
  data() {
    return {
      domainOptions: [],
      queryForm: {
        domain: '',
        appName: ''
      },
      // 查询返回结果
      pageResult: {
        data: [],
        paginator: {
          currentPage: 0,
          totalCount: 0,
          pageSize: 10,
          totalPage: 0
        }
      },
    }
  },
  async created() {
    this.domainOptions = await loadDomainSelector()
    await this.query()
  },
  mounted() {
  },
  methods: {
    async query() {
      let vm = this
      let ret = await registerPageQuery(vm.queryForm, vm.pageResult.paginator)
      if (ret.ok) {
        vm.pageResult = ret.data.queryPage
      } else {
        vm.$message({type: 'error', message: '查询失败：' + ret.message});
      }
    },
    getDomainName(domainCode) {
      let vm = this
      for (let i = 0; i < vm.domainOptions.length; i++) {
        let domainOption = vm.domainOptions[i];
        if (domainOption.value === domainCode) {
          return domainOption.label
        }
      }
      return domainCode;
    }
  }
}
</script>
